<template>
	<view>
		<Header :showBack="true" title="新增收货地址"></Header>
		<view class="form">
			<view>
				<view>地址</view>
				<input type="text" v-model="address1" placeholder="填写收货地址" placeholder-style="font-size:24rpx;color:#cccccc" value="" />
			</view>
			<view>
				<view>门牌号</view>
				<input type="text" v-model="address2" placeholder="填写详细地址，例：1层101" placeholder-style="font-size:24rpx;color:#cccccc" value="" />
			</view>
		</view>
		<view class="form">
			<view>
				<view>收货人</view>
				<input type="text" v-model="name" placeholder="姓名" placeholder-style="font-size:24rpx;color:#cccccc" value="" />
			</view>
			<view>
				<view>手机号</view>
				<input type="number" v-model="phone" placeholder="收货人手机号码" placeholder-style="font-size:24rpx;color:#cccccc" value="" />
			</view>
		</view>
		
		<button @click="saveAddress" type="default">保存</button>
	</view>
</template>

<script>
	var QQMapWX = require('../../commom/qqmap-wx-jssdk.js');
	var qqmapsdk
	let that
	export default {
		data() {
			return {
				info:{},
				address1:'',
				address2:'',
				name:'',
				phone:''
			}
		},
		onLoad() {
			that = this
			that.mapInit()
			// that.getWhere()
		},
		methods: {
			saveAddress(){
				if(this.address1&&this.address2&&this.name&&this.phone.length==11){
					this.$http('/member/api/mall/saveOwnerAddress',{
						"mId":this.address1+this.address2,
						"phone":this.phone,
						"name":this.name
					},res=>{
						uni.showToast({
							icon:'none',
							title:'添加成功'
						})
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},1500)
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'请填写完整资料'
					})
				}
				
			},
			mapInit(){
				qqmapsdk = new QQMapWX({
					key: "567BZ-YR7W2-Y3BUL-CTCJS-LPLFS-U2F25"
				});
			},
			// getWhere(){
			// 	uni.getLocation({
			// 		type: 'gcj02',
			// 		success: function(res) {
			// 			const {
			// 				latitude,
			// 				longitude
			// 			} = res;
			// 			const location = {
			// 				longitude,
			// 				latitude
			// 			};
			// 			qqmapsdk.reverseGeocoder({
			// 				location,
			// 				success: res1 => {
			// 					that.info = res1.result
			// 					that.address1 = res1.result.address_component.province + res1.result.address_component.city + res1.result.address_component.district + res1.result.address_component.street
			// 				},
			// 				fail:err=>{}
			// 			});
			// 		}
			// 	});
			// }
		}
	}
</script>

<style scoped lang="less">
.form{
	width: 690upx;
	background-color: #FFFFFF;
	margin: 20upx auto;
	border-radius: 8upx;
	// box-shadow: 0 0 15upx rgba(247, 200, 122, .2);
	box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
	>view{
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		display: flex;
		>view{
			width: 140upx;
			font-size: 26upx;
			font-weight: 600;
			box-sizing: border-box;
			padding-left: 25upx;
		}
		>input{
			width: 520upx;
			height: 100%;
			line-height: 100upx;
			font-size: 26upx;
		}
	}
}
button{
	width: 80%;
	height: 70upx;
	line-height: 70upx;
	color: #FFFFFF;
	font-size: 26upx;
	border-radius: 40upx;
	background-color: #49b9ad;
	margin-top: 50upx;
}
</style>
